import Vue from 'vue'
import VueRouter from 'vue-router'
import Chp01 from '../views/Chp01View.vue'
import Chp03 from '../views/Chp03View.vue'
import Chp04 from '../views/Chp04View.vue'
import Chp05 from '../views/Chp05View.vue'
import Chp06 from '../views/Chp06View.vue'
import Chp07 from '../views/Chp07View.vue'
import Chp08 from '../views/Chp08View.vue'
import Chp09 from '../views/Chp09View.vue'
import Chp10 from '../views/Chp10View.vue'
import Chp101 from '../views/Chp10-1View.vue'
import Chp102 from '../views/Chp10-2View.vue'
import Chp121 from '../views/Chp12-1View.vue'
import Chp122 from '../views/Chp12-2View.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/chp01',
    name: 'chp01',
    component: Chp01
  },
  {
    path: '/chp02',
    name: 'chp02',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: 'about' */ '../views/Chp02View.vue')
  },
  {
    path: '/chp03',
    name: 'chp03',
    component: Chp03
  },
  {
    path: '/chp04',
    name: 'chp04',
    component: Chp04
  },
  {
    path: '/chp05',
    name: 'chp05',
    component: Chp05
  },
  {
    path: '/chp06',
    name: 'chp06',
    component: Chp06
  },
  {
    path: '/chp07',
    name: 'chp07',
    component: Chp07
  },
  {
    path: '/chp08',
    name: 'chp08',
    component: Chp08
  },
  {
    path: '/chp09',
    name: 'chp09',
    component: Chp09
  },
  {
    path: '/chp10',
    name: 'chp10',
    component: Chp10,
    children: [
      { path: '/chp10/chp101', name: 'chp101', component: Chp101 },
      { path: '/chp102', name: 'chp102', component: Chp102 }
    ]
  },
  {
    path: '/chp121',
    name: 'chp121',
    component: Chp121
  },
  {
    path: '/chp122',
    name: 'chp122',
    component: Chp122
  }
]

const router = new VueRouter({
  routes
})

export default router
